<template>
  <view
    class="scroll-top"
    @click="pageScrollTo"
    v-if="opacity > 0"
    :style="{ opacity: opacity.toString(), bottom: bottom + 'rpx' }"
    :class="{ 'backdrop-filter': isNewIp }"
  >
    <view class="ali-icon">&#xe62b;</view>
  </view>
</template>

<script setup lang="ts">
  import { isNewIphone } from '@/utils/is';
  import { propTypes } from '@/utils/propTypes';
  import { onPageScroll } from '@dcloudio/uni-app';
  import { ref } from 'vue';

  defineProps({
    bottom: propTypes.number.def(160),
  });

  const { windowHeight, model } = uni.getSystemInfoSync();
  const isNewIp = isNewIphone(model);
  const opacity = ref<number>(0);

  function pageScrollTo() {
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 400,
    });
  }

  function PageScroll({ scrollTop }: { scrollTop: number }) {
    let top = scrollTop / windowHeight;
    opacity.value = top > 1 ? 1 : top <= 0 ? 0 : top;
  }

  onPageScroll(PageScroll);
</script>

<style lang="scss" scoped>
  .scroll-top {
    position: fixed;
    z-index: 100;
    right: 40rpx;
    bottom: 130rpx;
    width: 76rpx;
    height: 76rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0px 11rpx 54rpx 3rpx rgba(200, 200, 200, 0.5);
    background: #fff;
    .ali-icon {
      font-size: 32rpx;
      color: #333333;
    }
  }
  .backdrop-filter {
    background: rgba(255, 255, 255, 0.8);
  }
</style>
